body>.popup.request>.frame-container>.frame {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;

  // View height - 100px: In "modal" view, the popup has margin: 64px auto 32px (see _topbar.scss)
  // plus a couple pixels of border. To avoid any unwanted scrollbars, we need to make sure we
  // don't exceed the space remaining.
  max-height: calc(100vh - 100px);

  >h4 {
    flex: none;
    margin-top: 0px;
    margin-bottom: 10px;
  }
  >.search-row {
    flex: none;
    display: inline-block;
    width: 100%;
    margin: 0px;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: top;
    >label {
      >span.search-icon {
        @extend %pseudo-img-tag;
        background-image: url("/search.svg");
        background-size: 24px 24px;
        background-position: center;
        display: inline-block;
        width: 32px;
        height: 32px;
        vertical-align: top;
      }
      >input.search-bar {
        font-size: 16pt;
        height: 32px;
        width: calc(100% - 36px);
        background-color: $grainlist-searchbar-background-color;
        border: 1px solid $grainlist-searchbar-outline-color;
        &:focus {
          border: 1px solid $grainlist-searchbar-outline-color-focus;
        }
      }
    }
  }
  >ul.candidate-cards {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0px;
    margin: 10px;
    margin-top: 10px;
    width: calc(100% - 20px);
    >li.powerbox-card {
      @extend %powerbox-card;
    }
  }
  >.selected-card {
    flex: none;
    >div.powerbox-card {
      border: 1px solid #dddddd;
      background-color: #eeeeee;
      display: block;
      vertical-align: middle;
      width: 100%;
      height: 32px;
      line-height: 32px;
      background-size: 24px 24px;
      background-position: 4px 4px;
      background-repeat: no-repeat;
      padding-left: 32px;
    }
    >form {
      margin-top: 10px;
      >p {
        margin-top: 0px;
        margin-bottom: 5px;
      }
      >label {
        display: block;
      }
      >button {
        margin-top: 10px;
      }
      input[type="text"] {
        width: 100%;
        font-size: inherit;
        padding: 4px;
      }
    }
    div.choose-buttons {
      text-align: right;
      >button {
        @extend %button-base;
        &.connect-button {
          @extend %button-primary;
        }
        &.choose-hosted-object {
          @extend %button-secondary;
        }
      }
    }
    form.verified-email {
      >input[type=text] {
        font-size: 16pt;
      }
    }
    div.reset-row {
      display: flex;
      justify-content: flex-end;
      button[name=reset] {
        @extend %button-base;
        @extend %button-secondary;
      }
    }
    >div.powerbox-iframe-mount {
      width: 100%;
      height: 500px;
      border: 1px solid #ddd;
      margin-top: 10px;

      >div.grain-container {
        height: 100%;
        >iframe.grain-frame {
          position: static;
          width: 100%;
          height: 100%;
          display: block;
        }
      }
    }
  }
}

%powerbox-card {
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  &:last-child {
    border-bottom: 1px solid #dddddd;
  }
  background-color: #eeeeee;
  display: block;
  vertical-align: middle;
  height: 32px;
  >button.card-button {
    @include unstyled-button();
    @include overflow-ellipsis();
    width: 100%;
    background-size: 24px 24px;
    background-position: 4px 4px;
    background-repeat: no-repeat;
    padding-left: 32px;
    height: 31px;
  }
}
